/** @jsxImportSource @emotion/react */
import * as React from "react";
import {
  Text,
  useTheme,
  Container,
  Button,
  SuffixInput,
  IconArrowRight,
  InputDatalist, CheckSwitch,
  ComboBoxDatalist, InputLine, LineColumn,
  CommitInput, IconCloud
} from "customize-easy-ui-component";
import { DialogEnterReturn } from "../../context/DialogEnterReturn";
//import queryString from "querystring";
import {useCommnBaseParm, CommnBase} from "./CommnBase";
import {Link as RouterLink} from "../../routing/Link";

const queryString = require('query-string');
export const 管道材质=['钢制','PE管'];
export const 管道敷设式=['埋地','架空','其它'];
export const 管道级别=['GA1','GA2','GB1','GB2','GC1','GC2','GC3','GD1','GD2'];


interface 压力管道props {
  id?: string;
  readOnly?: boolean;
  editable?: boolean;
  //当前设备数据(确认修改之后)
  eqp?:any;
  //去修改设备数据
  mutationFunc: (...args: any[]) => any;
}
/**管道长度 LENGTH 不应该编辑和输入，其实是统计数。
 * 设计单位 DESIGN_UNT_NAME:在公用部分中（只能选择一个单位）；
 *对管道来说 设计证书编号 不一定是 设计许可证编号；
 *【特殊处理!】装置名称: 已经移交到公用的设备名称字段titl 互换含义。这里添加svp[管道设备名]来存储旧的字段；
 * 管道级别 基本没数据的；
 * */
export const 压力管道: React.FunctionComponent<压力管道props> = ({
       readOnly,
       id,
       editable,
       eqp=null,    //从好几代祖先前的DetailedGuide在graphQL获得后端服务器数据层层传递下来的。
                                                           mutationFunc,
     }) =>
{
  //const qs= queryString.parse(window.location.search);
  const theme = useTheme();
  const {save}= window.history.state?.state??{};      //通用伪对话框传递格式
  const edt = save?  save : eqp;

  const [matr, setMatr] = React.useState(edt.matr);
  const [level, setLevel] = React.useState(edt.level);
  const [mdi, setMdi] = React.useState(edt.mdi);
  const [temp, setTemp] = React.useState(edt.temp);
  const [prs, setPrs] = React.useState(edt.prs);
  const  svp = edt?.svp;
  const [保温式, set保温式] = React.useState(svp?.保温式);
  const [腐材料, set腐材料] = React.useState(svp?.腐材料);
  const [腐裕量, set腐裕量] = React.useState(svp?.腐裕量);
  const [规许可证, set规许可证] = React.useState(svp?.规许可证);
  const [工作压, set工作压] = React.useState(svp?.工作压);
  const [工作温, set工作温] = React.useState(svp?.工作温);
  const [公直径, set公直径] = React.useState(svp?.公直径);
  const [公壁厚, set公壁厚] = React.useState(svp?.公壁厚);
  const [衬厚, set衬厚] = React.useState(svp?.衬厚);
  const [起点, set起点] = React.useState(svp?.起点);
  const [止点, set止点] = React.useState(svp?.止点);
  const [设证号, set设证号] = React.useState(svp?.设证号);
  const [最高温, set最高温] = React.useState(svp?.最高温);
  const [最高压, set最高压] = React.useState(svp?.最高压);
  const [管道设备名, set管道设备名] = React.useState(svp?.管道设备名);
  const [附属设, set附属设] = React.useState(svp?.附属设);
  const  pa = edt?.pa;
  const [保装数, set保装数] = React.useState(pa?.保装数);
  const [安全级, set安全级] = React.useState(pa?.安全级);
  const [腐施单, set腐施单] = React.useState(pa?.腐施单);
  const [根数, set根数] = React.useState(pa?.根数);
  const [总长, set总长] = React.useState(pa?.总长);
  const [管规, set管规] = React.useState(pa?.管规);
  const [敷设, set敷设] = React.useState(pa?.敷设);
  const [管厚, set管厚] = React.useState(pa?.管厚);
  const [管材牌, set管材牌] = React.useState(pa?.管材牌);
  const [焊口数, set焊口数] = React.useState(pa?.焊口数);
  const [绝热材, set绝热材] = React.useState(pa?.绝热材);
  const [绝热厚, set绝热厚] = React.useState(pa?.绝热厚);
  const [衬料, set衬料] = React.useState(pa?.衬料);
  const [实用时, set实用时] = React.useState(pa?.实用时);
  const [试压, set试压] = React.useState(pa?.试压);
  const [监检号, set监检号] = React.useState(pa?.监检号);
  const [输送介, set输送介] = React.useState(pa?.输送介);
  const [探伤比, set探伤比] = React.useState(pa?.探伤比);
  const [保温, set保温] = React.useState(pa?.保温);
  //肢解可复用的共同组件模式： Hook + 配套的组件。
  const cbp =useCommnBaseParm(eqp, svp, pa, save);

  async function confirmation() {
    const newdat={ ...eqp,  ...cbp.out,
      matr,level,mdi,temp,prs,
      svp: { ...cbp.svpO,
        保温式,腐材料,腐裕量,规许可证,工作压,工作温,公直径,公壁厚,
        衬厚,起点,止点,设证号,最高温,最高压,管道设备名,附属设,
        }
      ,
      pa: { ...cbp.paO,
        保装数,安全级,腐施单,根数,总长,管规,敷设,管厚,管材牌,焊口数,
        绝热材,绝热厚,衬料,实用时,试压,监检号,输送介,探伤比,保温,
        }

    };

    return newdat;
  }


  return (
    <div
      css={{
        [theme.mediaQueries.md]: {
          height: "auto",
          display: "block"
        }
      }}
    >
      <hr/>
      <Text
        css={{
          flex: 1,
          textAlign: "center",
          [theme.mediaQueries.md]: {
            textAlign: "left"
          }
        }}
        wrap={false}
        variant="h5"
        gutter={false}
      >
        {eqp.cod} 压力管道技术参数
      </Text>
      <RouterLink href={`/pipeline/${eqp?.id}`}>
        <Button size="md" noBind intent="primary" variant="default" iconAfter={<IconCloud />}>
          去看该压力管道装置的单元
        </Button>
      </RouterLink>
      <div
        css={{
          flex: 1,
          [theme.mediaQueries.md]: {
            flex: "none"
          }
        }}
      >
        <div>
          <Container>
            <div
              css={{
                paddingTop: theme.spaces.lg,
                paddingBottom: theme.spaces.lg
              }}
            >

            <CommnBase cbp={cbp} id={id!}  confirmation={confirmation}/>
            <Text variant="h5">压力管道参数</Text>
            <LineColumn >
              <InputLine label={`安全保护装置数量:`}>
                <CommitInput  value={ 保装数 || ''}  onSave={txt => set保装数(txt||undefined) } />
              </InputLine>
              <InputLine label={`安全状况级别:`}>
                <CommitInput  value={ 安全级 || ''}  onSave={txt => set安全级(txt||undefined) } />
              </InputLine>
              <InputLine label={`保温(绝热)方式:`}>
                <CommitInput  value={ 保温式 || ''}  onSave={txt => set保温式(txt||undefined) } />
              </InputLine>
              <InputLine label={`防腐层材料:`}>
                <CommitInput  value={ 腐材料 || ''}  onSave={txt => set腐材料(txt||undefined) } />
              </InputLine>
              <InputLine label={`防腐施工单位:`}>
                <CommitInput  value={ 腐施单 || ''}  onSave={txt => set腐施单(txt||undefined) } />
              </InputLine>
              <InputLine label={`腐蚀裕量:`}>
                <CommitInput  value={ 腐裕量 || ''}  onSave={txt => set腐裕量(txt||undefined) } />
              </InputLine>
              <InputLine label={`根数(管道制造监检):`}>
                <SuffixInput  onSave={txt=> set根数(txt||undefined)}
                              value={ 根数 || ''}>根</SuffixInput>
              </InputLine>
              <InputLine label={`工程规划许可证号:`}>
                <CommitInput  value={ 规许可证 || ''}  onSave={txt => set规许可证(txt||undefined) } />
              </InputLine>
              <InputLine label={`工作温度:`}>
                <CommitInput  value={ 工作温 || ''}  onSave={txt => set工作温(txt||undefined) } />
              </InputLine>
              <InputLine label={`工作压力:`}>
                <CommitInput  value={ 工作压 || ''}  onSave={txt => set工作压(txt||undefined) } />
              </InputLine>
              <InputLine label={`公称壁厚:`}>
                <CommitInput  value={ 公壁厚 || ''}  onSave={txt => set公壁厚(txt||undefined) } />
              </InputLine>
              <InputLine label={`公称直径:`}>
                <CommitInput  value={ 公直径 || ''}  onSave={txt => set公直径(txt||undefined) } />
              </InputLine>
              <InputLine label={`管道材质:`}>
                <InputDatalist value={ matr || ''} datalist={管道材质}
                               onListChange={v => setMatr(v ||undefined)} />
                {/*<Select inputSize="md"  value={ matr || ''}
                        onChange={e => setMatr( e.currentTarget.value||undefined ) } >
                  <option></option>
                  { 管道材质.map((one,i) => (<option key={i}>{one}</option> )) } </Select>*/}
              </InputLine>
              <InputLine label={`管道长度(汇总):`}>
                <SuffixInput  onSave={txt=> set总长(txt||undefined)}
                              type="number"  value={ 总长 || ''}>m</SuffixInput>
              </InputLine>
              <InputLine label={`管道敷设方式:`}>
                <InputDatalist value={ 敷设 || ''} datalist={管道敷设式}
                               onListChange={v => set敷设(v ||undefined)} />
                {/*<Select inputSize="md"  value={ 敷设 || ''}
                        onChange={e => set敷设( e.currentTarget.value||undefined ) } >
                  <option></option>
                  { 管道敷设式.map((one,i) => (<option key={i}>{one}</option> )) } </Select>*/}
              </InputLine>
              <InputLine label={`管道规格:`}>
                <CommitInput  value={ 管规 || ''}  onSave={txt => set管规(txt||undefined) } />
              </InputLine>
              <InputLine label={`管道厚度:`}>
                <CommitInput  value={ 管厚 || ''}  onSave={txt => set管厚(txt||undefined) } />
              </InputLine>
              <InputLine label={`管道级别:`}>
                <ComboBoxDatalist  value={ level || ''}  datalist={管道级别}
                      onListChange={v => setLevel( v||undefined ) } />
              </InputLine>
              <InputLine label={`管道介质:`}>
                <CommitInput  value={ mdi || ''}  onSave={txt => setMdi(txt||undefined) } />
              </InputLine>
              <InputLine label={`管子材料牌号:`}>
                <CommitInput  value={ 管材牌 || ''}  onSave={txt => set管材牌(txt||undefined) } />
              </InputLine>
              <InputLine label={`焊口数量:`}>
                <CommitInput  value={ 焊口数 || ''}  onSave={txt => set焊口数(txt||undefined) } />
              </InputLine>
              <InputLine label={`绝热层材料:`}>
                <CommitInput  value={ 绝热材 || ''}  onSave={txt => set绝热材(txt||undefined) } />
              </InputLine>
              <InputLine label={`绝热层厚度:`}>
                <CommitInput  value={ 绝热厚 || ''}  onSave={txt => set绝热厚(txt||undefined) } />
              </InputLine>
              <InputLine label={`内衬壁厚:`}>
                <CommitInput  value={ 衬厚 || ''}  onSave={txt => set衬厚(txt||undefined) } />
              </InputLine>
              <InputLine label={`内衬材料:`}>
                <CommitInput  value={ 衬料 || ''}  onSave={txt => set衬料(txt||undefined) } />
              </InputLine>
              <InputLine label={`起点:`}>
                <CommitInput  value={ 起点 || ''}  onSave={txt => set起点(txt||undefined) } />
              </InputLine>
              <InputLine label={`止点:`}>
                <CommitInput  value={ 止点 || ''}  onSave={txt => set止点(txt||undefined) } />
              </InputLine>
              <InputLine label={`设计温度:`}>
                <CommitInput  value={ temp || ''}  onSave={txt => setTemp(txt||undefined) } />
              </InputLine>
              <InputLine label={`设计压力:`}>
                <CommitInput  value={ prs || ''}  onSave={txt => setPrs(txt||undefined) } />
              </InputLine>
              <InputLine label={`设计证书编号:`}>
                <CommitInput  value={ 设证号 || ''}  onSave={txt => set设证号(txt||undefined) } />
              </InputLine>
              <InputLine label={`实际使用时间:`}>
                <CommitInput  value={ 实用时 || ''}  onSave={txt => set实用时(txt||undefined) } />
              </InputLine>
              <InputLine label={`试验压力:`}>
                <CommitInput  value={ 试压 || ''}  onSave={txt => set试压(txt||undefined) } />
              </InputLine>
              <InputLine label={`授权监督检验文号:`}>
                <CommitInput  value={ 监检号 || ''}  onSave={txt => set监检号(txt||undefined) } />
              </InputLine>
              <InputLine label={`输送介质:`}>
                <CommitInput  value={ 输送介 || ''}  onSave={txt => set输送介(txt||undefined) } />
              </InputLine>
              <InputLine label={`探伤比例:`}>
                <CommitInput  value={ 探伤比 || ''}  onSave={txt => set探伤比(txt||undefined) } />
              </InputLine>
              <InputLine label={`有无保温绝热:`}>
                <CommitInput  value={ 保温 || ''}  onSave={txt => set保温(txt||undefined) } />
              </InputLine>
              <InputLine label={`管道设备名(旧平台设备名称):`}>
                <CommitInput  value={ 管道设备名 || ''}  onSave={txt => set管道设备名(txt||undefined) } />
              </InputLine>
              <InputLine label={`最高工作温度:`}>
                <CommitInput  value={ 最高温 || ''}  onSave={txt => set最高温(txt||undefined) } />
              </InputLine>
              <InputLine label={`最高工作压力:`}>
                <CommitInput  value={ 最高压 || ''}  onSave={txt => set最高压(txt||undefined) } />
              </InputLine>

            </LineColumn>
              <Text variant="h5">其它参数</Text>
              <LineColumn >
                <InputLine label={'是否附属设备？'}>
                  <CheckSwitch checked= {附属设 || false}
                               onChange={e => set附属设(!附属设) }
                  />
                </InputLine>
              </LineColumn>

              <Button size="lg" intent="primary"  iconAfter={<IconArrowRight />}
                      css={{ marginTop: theme.spaces.sm, whiteSpace:'unset' }}
                onPress={ async () => {
                  const eqpNew=await confirmation();
                  await mutationFunc(eqpNew);
                } }
              > 确认修改检查并保存到后端
              </Button>
            </div>
          </Container>
        </div>
      </div>

    </div>
  );
};

